<head>
    <meta charset="utf-8" />
    <title>子字符串匹配选择器</title>
    <!-- 
        [attr^=value]	li[class^="box-"]	
            匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
        [attr$=value]	li[class$="-box"]	
            匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
        [attr*=value]	li[class*="box"]	
            匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

     -->
    <style>
        /* li[class^="a"]匹配了任何值开头为a的属性，于是匹配了前两项。 */
        /* li[class^="a"] {
            color: red;
        } */

        /* li[class$="a"]匹配了任何值结尾为a的属性，于是匹配了第一和第三项。 */
        /* li[class$="a"] {
            color: red;
        } */

        /* li[class*="a"]匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。 */
        li[class*="a"] {
            color: red;
        }
    </style>
</head>

<body>
    <h1>Attribute substring matching selectors</h1>
    <ul>
        <li class="a">Item 1</li>
        <li class="ab">Item 2</li>
        <li class="bca">Item 3</li>
        <li class="bcabc">Item 4</li>
    </ul>
</body>

</html>